<template>
    <view class="m-sidebar">
        <scroll-view scroll-y class="m-sidebar-left">
            <view
                v-for="item in sidebars"
                class="m-sidebar-left-item"
                :class="{ 'm-sidebar-left-item--sel': item.sel }"
                @click="itemClick(item)"
            >
                {{ item.name }}
            </view>
        </scroll-view>
        <scroll-view scroll-y class="m-sidebar-right" :scroll-top="top" @scroll="scroll">
            <template v-for="item in categorys">
                <view class="m-sidebar-right-content-title" v-if="item.children && item.children?.length > 0">
                    <text class="m-sidebar-right-content-title-text">{{ item.name }}</text>
                </view>
                <view class="m-icon-btn-box" v-if="item.children && item.children?.length > 0">
                    <uni-row
                        v-for="(temp, i) in item.children.length % col == 0
                            ? Math.floor(item.children.length / col)
                            : Math.floor(item.children.length / col + 1)"
                        class="m-icon-btn-box-row"
                    >
                        <uni-col v-for="(temp, j) in col" class="m-icon-btn" :span="24 / col">
                            <template v-if="i * col + j < item.children.length">
                                <image class="m-icon-btn-box-iamge" :src="item.children[i * col + j].imageUrl" />
                                <text class="m-icon-btn-text">{{ item.children[i * col + j].name }}</text>
                            </template>
                        </uni-col>
                    </uni-row>
                </view>
            </template>
        </scroll-view>
    </view>
</template>

<script lang="ts" setup>
import { shallowRef, shallowReactive, computed, ref, toRef } from 'vue'
import Util from '@/util/Util'
interface SideBarItem extends Category {
    sel: boolean
}
const props = defineProps({
    height: { type: String, default: '750rpx' },
    menus: { type: Array<Category>, default: [] }
})
let col = 3
const top = ref(0)
let oldtop = 0
function scroll(e: any) {
    oldtop = e.detail.scrollTop
}
let curMenu: Ref<boolean>
const sidebars = Util.deepCopy(props.menus).map((v, index) => {
    let item: SideBarItem = shallowReactive({ ...v, sel: index == 0 })
    if (index == 0) {
        curMenu = toRef(item, 'sel')
    }
    return item
})
const categorys = shallowRef<Category[]>(sidebars[0].children || [])
function itemClick(item: SideBarItem) {
    curMenu.value = false
    item.sel = true
    curMenu = toRef(item, 'sel')
    categorys.value = item.children || []
    top.value = oldtop
    setTimeout(() => {
        top.value = 0
    })
}
</script>

<style lang="scss" scoped>
.m-sidebar-left {
    height: v-bind(height);
    max-width: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
.m-sidebar-right {
    height: v-bind(height);
    background-color: $uni-bg-color;
    flex-grow: 1;
}
.m-sidebar-left-item {
    padding: $uni-spacing-row-base $uni-spacing-col-lg;
    color: black;
    background-color: $uni-bg-color-grey;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: $uni-font-size-base;
    &--sel {
        background-color: $uni-bg-color;
        color: $uni-color-error;
        font-size: $uni-font-size-lg;
    }
}
.m-icon-btn {
    color: black;
    font-size: $uni-font-size-base;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.m-icon-btn-text {
    margin-top: $uni-spacing-row-sm;
}
.m-icon-btn-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.m-icon-btn-box-iamge {
    width: 150rpx;
    height: 150rpx;
}
.m-sidebar-right-content-title {
    border-bottom: 2rpx #ddd solid;
    text-align: center;
    color: #000;
    margin: $uni-spacing-col-lg $uni-spacing-col-lg;
    font-size: $uni-font-size-lg;
    height: $uni-font-size-sm;
    font-weight: 700;
}
.m-sidebar-right-content-title-text {
    padding: 0 $uni-spacing-row-base;
    background-color: $uni-bg-color;
}
.m-icon-btn-box-row {
    width: 100%;
    margin: $uni-spacing-col-base 0;
}
.m-sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
</style>
